/**
 * 用户个人信息页面
 * @author 杨世峰
 */

<template>
  <div class="user-personal-center">
    <el-row>
      <el-col :span="8"><h3></h3></el-col>
      <el-col :span="8"><el-card shadow="always">
      <el-form
        ref="userInfoTable"
        :label-position="labelPosition"
        label-width="auto"
        :model="userInfoTable"
        :rules="userInfoRules"
      >
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userInfoTable.nickname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userInfoTable.sex" placeholder="请选择性别">
            <el-option label="男" value="m"></el-option>
            <el-option label="女" value="f"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            v-model="userInfoTable.birthday"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学历" prop="education">
            <el-select v-model="userInfoTable.education" placeholder="请选择学历">
            <el-option label="博士" value="博士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="大专" value="大专"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="小学" value="小学"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="userInfoTable.school"></el-input>
        </el-form-item>
        <el-form-item label="职业" prop="career">
          <el-input v-model="userInfoTable.career"></el-input>
        </el-form-item>
      </el-form>
        <el-button @click="handleUserInfoChange" type="primary" round style="width: -webkit-fill-available;">保存</el-button>
    </el-card></el-col>
    </el-row>

  </div>
</template>

<script>

import {  modifyUserInfo, getUserInfo } from '@/api/user/userBasicApi.js'

export default {
  data() {
    return {
      labelPosition: "right",
      userInfoTable: {
        nickname: "",
        sex: "",
        birthday: "",
        education: "",
        school: "",
        career: "",
      },

      userInfoRules: {
        nickname: [
          { required: true, trigger: "blur", message: "请输入昵称" },
          { min: 1, max: 20, message: '用户账号长度必须介于 1 和 20 之间', trigger: 'blur' }
        ],
        school: [
          { required: false, trigger: "blur", message: "请输入学校" },
          { min: 1, max: 20, message: '字符长度必须介于 1 和 20 之间', trigger: 'blur' }
        ],
        career: [
          { min: 1, max: 20, message: '字符长度必须介于 1 和 20 之间', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userId() {
      return this.$store.getters.userId
    }
  },

  methods: {
    handleUserInfoChange() {
      this.$refs.userInfoTable.validate(valid => {
        if (valid) {
          this.loading = true;
          this.userInfoTable['userId'] = Number(this.userId)
          modifyUserInfo(this.userInfoTable).then(res => {
            console.log(res)
            // 根据返回结果状态码判断
            this.$alert('<font color="red">' + res.message  +' </font>', '系统提示', {dangerouslyUseHTMLString: true, type: res.resultCode == '200' ? 'success' : 'error'})
            .then(() => {})
            .catch(() => {});
          }).catch(() => {}).then(() => {this.loading = false;})
        }
      })
    }
  },
  created() {
    getUserInfo(this.userId).then(res => {
      console.log(res.data)
      this.userInfoTable = res.data;
    }).catch(err => {console.log(err)})
  }
}
</script>

<style scoped>
.el-card__body {
  padding: 85px 65px 20px 20px;
}
</style>